<template>
	<view class="page">
		<div class="login_bg">
			<image class="img" src="../../static/img/login_bg1.png" />
		</div>

		<div class="content" :style="{'padding-top':statusBarHeight+'rpx'}">
			<image class="login_bg2" src="../../static/img/login_bg2.png" mode=""></image>
			<button class="login" type="primary" open-type="getUserInfo" :disabled="authLoading"
				@click="getUserInfo">一键登录</button>
			<view class="agree-wrap agree" @click="agreeChange">
				<view style="display: flex;align-items: center;">
					<image class="radio"
						:src="agree === '0' ? '/static/img/checkbox.png' : '/static/img/checkbox-active.png'"
						mode="aspectFit" />
					<text class="" style="color: #63696B;">同意</text>
				</view>
				<text class="link">《用户协议》</text> <span style="color: #63696B;">与</span> <text class="link">《隐私政策》</text>
			</view>
		</div>
		<copyright />
		<uni-popup ref="popup" type="bottom" class="popup-height" background-color="#fff">
			<view class="register-popup">
				<view class="tips">
					温馨提示
				</view>
				<view class="allow-wrap">
					<view class="no-register">
						检测到您还未注册账号
					</view>
					<view class="allow">
						为了方便我们与您联系，请允许我们获取您的手机号码
					</view>
				</view>
				<view class="btn-wrap">
					<button class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						type="primary">手机号快捷登录</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="agreement" type="center" style="border-radius: 26rpx;">
			<view class="agreement-height">
				<image class="agree-bg" src="/static/img/agree-box.png" mode="widthFix"></image>
				<view class="login-content">
					<mp-html :content="content" />
					<view class="agreement-btn-wrap">
						<button class="refuse-btn" @click="onRefuse">拒绝</button>
						<button id="agree-btn" class="ok-btn" @click="handleAgreePrivacyAuthorization"
							open-type="agreePrivacyAuthorization">同意并继续</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Copyright from '@/components/copyright/index.vue'
	import {
		login,
		GetUserPrivacyAgreement
	} from '@/utils/api.js';
	import MpHtml from '@/components/mp-html/mp-html'
	export default {
		name: 'Login',
		components: {
			Copyright,
			MpHtml
		},
		data() {
			return {
				authLoading: false,
				isNeedScan: false,
				agree: '0',
				content: '',
				navHeight: '',
				statusBarHeight: '',
			}
		},
		onLoad(op) {
			console.log(op)
			let {
				statusBarHeight,
				system
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
			this.getData(false)
			if (op.scan && op.scan === '1') {
				console.log(op)
				this.isNeedScan = true
			} else {
				this.isNeedScan = false
			}

		},
		methods: {
			async getData(tag) {
				if (tag) {
					uni.showLoading({
						title: 'loading'
					});
				}
				const res = await GetUserPrivacyAgreement()
				if (res.code === 200) {
					this.content = decodeURIComponent(res.data.privacyagreement).replace(/\+style/g, ' style')
					if (tag) {
						uni.hideLoading()
					}
				}
			},
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			getUserInfo(e) {
				uni.showLoading({
					title: '登陆中..'
				});
				// console.log('111');
				if (this.agree === '0') {
					uni.showToast({
						title: '请先同意用户协议和隐私政策',
						icon: 'none'
					})
					return
				}

				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res, 'uni,login')
						if (res.code) {
							// 准备请求体数据
							login({
								body: {
									code: res.code
								},
								token: null
							}).then(res => {
								console.log(res);
								if (res.code == 101) {
									this.$store.commit('$uStore', {
										name: 'vx_openId',
										value: res.data,
									})
									this.$refs.popup.open('bottom')

								} else if (res.code == 200) {
									//已注册直接进入小程序
									uni.reLaunch({
										url: '/pages/home/index'
									})
									this.$store.commit('$uStore', {
										name: 'vx_token',
										value: res.data.token,
									})
									this.$store.commit('$uStore', {
										name: 'vx_uid',
										value: res.data.userid,
									})
									this.$store.commit('$uStore', {
										name: 'vx_phone',
										value: res.data.phone,
									})
									this.$store.commit('$uStore', {
										name: 'vx_sex',
										value: res.data.sex,
									})
									this.$store.commit('$uStore', {
										name: 'name',
										value: res.data.name,
									})
								}
							}).catch(err => {
								console.log('err', err);
							})
						}
					}
				})
			},
			onClose() {
				this.authLoading = false
			},
			async agreeChange() {
				console.log(this.agree)
				if (this.agree == '0') {
					if (!this.content) {
						await this.getData(true)
					} else {
					this.$refs.agreement.open('center')
					}
				}
			},
			// goAgreement() {
			// 	uni.navigateTo({
			// 		url: '/page_user/agreement/index'
			// 	})
			// },
			// goPrivacy() {
			// 	uni.navigateTo({
			// 		url: '/page_user/privacy/index'
			// 	})
			// },
			// goConsent() {
			// 	uni.navigateTo({
			// 		url: '/page_user/consent/index'
			// 	})
			// },
			handleAgreePrivacyAuthorization() {
				this.$refs.agreement.close()
				this.agree = '1'
				console.log('用户点击同意');
				wx.getPrivacySetting({
					success: res => {
						console.log(
							res
						) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
						if (res.needAuthorization) {
							// 需要弹出隐私协议
							console.log('需要弹出隐私协议');
							this.getData(true)
							this.$refs.agreement.open('center')
						} else {
							// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
							console.log('用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口');
						}
					},
					// fail: () => {},
					// complete() => {}
				})

			},
			onRefuse() {
				this.$refs.agreement.close()
				this.agree = '0'
			},
			async getPhoneNumber(e) {
				let obj = e.detail || e
				console.log(e, 'getphonenumber')
				if (obj.errMsg === 'getPhoneNumber:ok') {

					this.$store.commit('$uStore', {
						name: 'vx_phone_code',
						value: obj.code,
					})
					//未注册跳转注册页
					uni.hideLoading()
					//用户未注册，跳转注册页
					uni.reLaunch({
						url: '/pages/welcome/index'
					})
				} else {
					uni.showToast({
						title: '您拒绝了授权~,注册失败~'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;

		.login_bg {
			width: 750rpx;
			height: 800rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.login_bg2 {
			position: absolute;
			width: 270rpx;
			height: 263rpx;
			top: 30%;
			left: 52%;
			transform: translate(-50%, -50%);
		}

		.p1 {
			width: 500rpx;
			position: absolute;
			text-align: center;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 20px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 36px;
			letter-spacing: 1px;
		}

		.content {
			// margin-top: 203rpx;
			padding: 0 64rpx;
		}
		
		.login {
			position: absolute;
			top: 60%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #FFFFFF;
			line-height: 100rpx;
			width: 630rpx;
			height: 100rpx;
			background: #2CB0C5;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}


		.agree {
			color: #A7A6A6;
			font-size: 27rpx;
			font-weight: 400;

			.link {
				color: #2CB0C5
			}
		}
	}

	.popup-height {
		height: 40vh;
	}

	.register-popup {
		height: 40vh;
		padding: 30rpx;

		.tips {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}

		.btn-wrap {
			margin: 30rpx auto;
			display: flex;
			justify-content: center;
		}

		.phone-btn {
			margin-top: 50rpx;
		}

		.no-register {
			font-size: 28rpx;
			color: #3b4144;
		}

		.allow-wrap {
			margin-top: 60rpx;
			text-align: center;
		}

		.allow {
			font-size: 28rpx;
			margin-top: 20rpx;
			color: #909399;
		}
	}

	.agree-wrap {
		width: 470rpx;
		margin: 50rpx auto 0;
		display: flex;
		align-items: center;
		position: absolute;
		top: 65%;
		left: 50%;
		transform: translate(-50%, -50%);

		.radio {
			width: 27rpx;
			height: 27rpx;
			margin-right: 10rpx;
		}
	}

	.agreement-height {
		width: 615rpx;
		height: 70vh;
		margin: 0 auto;
		border-radius: 26rpx;
		background-color: #ffffff;
		position: relative;

		.agree-bg {
			width: 615rpx;
			position: absolute;
			z-index: 0;
		}

		.login-content {
			width: 515rpx;
			position: absolute;
			padding: 60rpx 50rpx 0;
			height: calc(100% - 100rpx);
			overflow-y: scroll;
		}

		.agreement-btn-wrap {
			background-color: #ffffff;
			padding-top: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ok-btn {
				width: 250rpx;
				height: 85rpx;
				line-height: 85rpx;
				background: #2CB0C5;
				border-radius: 15rpx;
				text-align: center;
				font-size: 31rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.refuse-btn {
				width: 250rpx;
				height: 85rpx;
				line-height: 85rpx;
				font-size: 31rpx;
				font-weight: 400;
				color: #333333;
				background: #EBEBED;
				text-align: center;
				border-radius: 15rpx;
			}
		}
	}
</style>